<template>
  <view class="entry flex-column justify-center items-center">
    <view class="entry-title">
      <view class="before_line"></view>
      <view class="title">{{ title }}</view>
      <view class="after_line"></view>
    </view>
    <view class="entry-title progress">
      ({{currentPage}}/{{ totalCount }})
    </view>
  </view>
  <view class="title_content"></view>
</template>

<script setup lang="ts">
/**
 * @author:  cxy
 * @description 入职表单头部
 * @param { object} data - 对象{ type: 'loading', message: "加载中"}  
 */
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  currentPage: {
    type: Number,
    default: 1,
  },
  totalCount: {
    type: Number,
    default: 1,
  },
});
</script>

<style lang="scss" scope>

.entry {
  height: 128rpx;
  background: linear-gradient(180deg, #E6EDFB 0%, #97B2E3 100%);
  box-shadow: 0rpx 4rpx 30rpx 0rpx #F3F3F3;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 99;
  &-title{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    
    .before_line{
      width: 100rpx;
      height: 3rpx;
      background: linear-gradient(90deg, rgba(21,55,118,0) 0%, #153776 100%);
    }
    .after_line{
      width: 100rpx;
      height: 3rpx;
      background: linear-gradient(270deg, rgba(21,55,118,0) 0%, #153776 100%);
    }
    .title{
      margin: 0 20rpx;
      height: 50rpx;
      font-size: 36rpx;
      font-family: PingFang SC-Semibold, PingFang SC;
      font-weight: 600;
      color: #153776;
      line-height: 50rpx;
    }
    
  }
  .progress{
      height: 44rpx;
      font-size: 32rpx;
      font-family: PingFang SC-Regular, PingFang SC;
      font-weight: 400;
      color: #153776;
      line-height: 38rpx;
    }
}
.title_content{
  height: 128rpx;
}
</style>
